<template>
  <!-- 社区详情 -->
  <div class="Detail-mobile">
    <div class="g-con-m">
      <div class="breadcrumb">
        {{ t('blog.pt2') }}
      </div>
      <div class="container">
        <div class="title flexcc">{{ detailInfo.articleTitle }}</div>
        <div class="author flexcc mt-3">{{ detailInfo.customerName }} · {{ dateFormat(detailInfo.createTime, 2) }}</div>
        <div
          class="info mt-3"
          v-if="!imgList.length"
        >
          {{ detailInfo.articleText }}
        </div>
        <div v-if="imgList.length">
          <div
            class="info mt-3"
            v-for="(item, index) in imgList"
            :key="index"
          >
            <p v-if="index != imgList.length - 1">
              {{ detailInfo.articleText.slice(index * 130, (index + 1) * 130) }}
            </p>
            <p v-else>
              {{ detailInfo.articleText.slice(index * 130) }}
            </p>
            <p class="txt-img">
              <img
                :src="item"
                alt=""
              />
            </p>
          </div>
        </div>
        <div class="user-info">
          <div class="avatar">
            <img
              :src="detailInfo.avatar"
              alt=""
            />
          </div>
          <div class="name">
            {{ detailInfo.customerName }}
          </div>
          <div class="role-type">
            {{ detailInfo.label }}
          </div>
          <div class="narration mt-3 mb-2">
            {{ t('blog.nar') }}
          </div>
          <el-button
            class="like"
            v-if="detailInfo.isLike == 0"
            type="primary"
            @click="changeLike(0, detailInfo)"
          >
            <img
              src="@/assets/img/icon_dianzan_nor.png"
              alt=""
              class="mr-1"
            />
            <span>{{ detailInfo.likeCount }}</span>
          </el-button>
          <el-button
            class="like"
            v-if="detailInfo.isLike > 0"
            @click="changeLike(1, detailInfo)"
          >
            <img
              src="@/assets/img/icon_dianzan_pre.png"
              alt=""
              v-if="detailInfo.isLike > 0"
              class="mr-1"
            />
            <span> {{ detailInfo.likeCount }}</span>
          </el-button>
        </div>
        <div class="comment mt-3">
          <el-input
            type="textarea"
            v-model="commentValue"
            :autosize="{ minRows: 3, maxRows: 3 }"
            resize="none"
            :placeholder="t('blog.tip')"
            clearable
            style="padding-top: 14px"
          />
          <el-button
            type="primary"
            class="mt-1"
            @click="postCommentFn"
            >{{ t('blog.comment') }}</el-button
          >
        </div>
        <div class="comment-container">
          <div
            class="comment-list mt-3"
            v-for="child in commentList"
            :key="child"
          >
            <div class="wp-100 ip-date">{{ child.commentLocation }} {{ dateFormat(child.commentDate, 2) }}</div>
            <div
              :span="24"
              class="comment-item"
            >
              <div class="head-sculpture">
                <img
                  :src="child.customerAvatar"
                  alt=""
                />
              </div>
              <div class="name">
                <h2>
                  {{ child.createBy }}<span class="date"> · {{ child.label }}</span>
                </h2>
                <p>{{ child.commentContent }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      v-model="QrCodeVis"
      title="QrCode share"
      width="80%"
      destroy-on-close
      center
    >
      <el-image
        :src="currentLinkImg"
        class="qrcode"
      ></el-image>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { dateFormat } from '@/utils/index'
import { getInfo, articleCancelLike, articleLike, getCommentList, postComment, generateQrCode } from '@/service/blog.js'
import axios from 'axios'

import useClipboard from 'vue-clipboard3'

const router = useRouter()
const route = useRoute()
const detailInfo = ref({})
const { t, locale } = useI18n()
const imgList = ref([])
const commentValue = ref('')
const commentList = ref([])
const IPValue = ref('')
const currentLinkImg = ref('')
const QrCodeVis = ref(false)

const { toClipboard } = useClipboard()
const copy = async (text) => {
  try {
    await toClipboard(text)
    ElMessage.success(t('news.copy'))
  } catch (e) {}
}

const postCommentFn = async () => {
  let data = {
    articleId: router.currentRoute.value.query.id,
    commentContent: commentValue.value,
    // commentDate:new Date().getTime(),
    customerId: JSON.parse(localStorage.getItem('login')).userInfo.id,
    commentLocation: IPValue.value
  }
  await postComment(data).then((res) => {
    // ElMessage({
    //   message: '评论成功',
    //   type: 'success',
    // })
  })
  getCurComment()
  commentValue.value = ''
}

// 评论列表
const getCurComment = () => {
  getCommentList({ articleId: router.currentRoute.value.query.id, pageNum: 1, pageSize: 10 }).then((res) => {
    commentList.value = res.rows
  })
}
const changeLike = async (value, item) => {
  let data = {
    customerId: JSON.parse(localStorage.getItem('login')).userInfo.id,
    objType: 0,
    objId: router.currentRoute.value.query.id
  }
  if (value == 0) {
    await articleLike(data).then((res) => {
      // ElMessage({
      //   message: '点赞成功',
      //   type: 'success',
      // })
    })
  } else {
    await articleCancelLike(data).then((res) => {
      // ElMessage({
      //   message: '取消成功',
      //   type: 'success',
      // })
    })
  }
  getInfoFn()
}
const getInfoFn = () => {
  getInfo({ id: router.currentRoute.value.query.id }).then((res) => {
    detailInfo.value = res.data
    imgList.value = res.data.articlePicture.split(',')
  })
}
//分享
const shareFn = (type) => {
  if (type == 'link') {
    copy(window.location.href)
    // ElMessage({
    //   type:'success',
    //   message:'复制成功'
    // })
  } else {
    generateQrCode({ link: window.location.href }).then((res) => {
      currentLinkImg.value = window.URL.createObjectURL(res)
      QrCodeVis.value = true
    })
  }
}
watch(locale, (n) => {
  //
})
onMounted(() => {
  getInfoFn()
  getCurComment()
  axios.get('https://qifu-api.baidubce.com/ip/local/geo/v1/district').then((res) => {
    IPValue.value = res.data.data.country + res.data.data.city
  })
})
</script>

<style scoped lang="scss">
.Detail-mobile {
  .g-con-m {
    padding: 0;
  }
  .breadcrumb {
    background: #252628;
    color: #fff;
    padding: 12px 20px;
    font-weight: bold;
  }

  .container {
    padding: 10px;
    .title {
      font-size: 26px;
      font-weight: bold;
    }

    .author {
      color: #9d9fa5;
      font-size: 14px;
    }

    .info {
      color: #6a6973;
      line-height: 1.6;
      word-break: break-all;
      font-size: 18px;
      img {
        max-width: 100%;
      }
    }

    .txt-img {
      width: 100%;
      margin: 10px auto;

      img {
        width: 100%;
        // height: 384px;
      }
    }

    .user-info {
      margin: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .avatar {
        width: 30px;
        height: 30px;
        margin: auto;
        margin-top: 54px;
        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
      }

      .name {
        text-align: center;
        font-size: 18px;

        font-weight: bold;
        color: #252628;
        margin: 10px 0px;
      }

      .role-type {
        text-align: center;
        font-size: 14px;

        font-weight: 400;
        color: #9d9fa5;
      }

      .narration {
        text-align: center;
        font-size: 14px;

        font-weight: 400;
        color: #6a6973;
        line-height: 26px;
      }

      .like {
        width: 200px;
        height: 30px;
        margin: auto;

        span {
          font-size: 14px;
        }

        img {
          width: 16px;
          height: 16px;
        }
      }
    }

    .comment {
      width: 100%;
      display: flex;
      flex-direction: column;
      margin-top: 50px;
      margin-bottom: 40px;
      :deep(.el-textarea__inner) {
        font-size: 14px;
      }
      button {
        // width: 370px;
        height: 50px;
        // margin-left: 343px;
      }
      :deep(.el-button--primary) {
        span {
          font-size: 14px;
        }
      }
    }

    .comment-container {
      width: 100%;
      max-height: 600px;
      overflow-y: auto;
      margin-top: 30px;

      .comment-list {
        width: 100%;
        background: rgba(245, 245, 245, 1);
        padding: 18px 15px 28px 31px;
        margin-top: 30px;

        &:nth-child(1) {
          margin-top: 0px;
        }

        .ip-date {
          font-size: 18px;

          font-weight: 400;
          color: #9d9fa5;
          text-align: right;
        }

        .comment-item {
          display: flex;

          .head-sculpture {
            img {
              width: 60px;
              height: 60px;
              border-radius: 50%;
              margin-right: 12px;
            }
          }

          .name {
            padding-top: 4px;

            h2 {
              font-size: 26px;

              font-weight: bold;
              color: #252628;

              .date {
                font-size: 24px;

                font-weight: 400;
                color: #9d9fa5;
              }
            }

            p {
              font-size: 24px;

              font-weight: 400;
              color: #9d9fa5;
              margin-top: 4px;
            }
          }
        }
      }
    }
  }
}
.qrcode {
  width: 100%;
  height: 100%;
  :deep(img) {
    width: 40%;
    height: 40%;
    margin-left: 30%;
  }
}
</style>
